<template>
	<view class="page_userSet clearfix">
		<view class="list">
			<view class="item">
				<text>头像</text>
				<view class="sub" @click="chooseImg">
					<image class="user_img" :src="userInfo.icon"></image>
					<uni-icons type="arrowright" color="#bcbcbc" size="24"></uni-icons>
				</view>
			</view>
		</view>
		<view class="item_wrap">
			<view class="title">昵称</view>
			<view class="input_wrap">
				<input placeholder="请输入昵称" v-model="empInfo.empName" />
			</view>
		</view>
		<view class="item_wrap sex_wrap">
			<view class="title">性别</view>
			<view class="chooseSex">
				<text class="sex_item" v-for="(item,index) in sexItem "  :class=" chooseIndex == index ? 'active': ''" :data-id="item.id" 
				:key="item.id" @click="chooseSex">{{item.value}}</text>
			</view>
		</view>
		<view class="item_wrap">
			<view class="title">手机号码</view>
			<view class="input_wrap">
				<input placeholder="手机号码" v-model="empInfo.phone" disabled/>
			</view>
		</view>
		<view class="item_wrap">
			<view class="title">邮箱</view>
			<view class="input_wrap">
				<input placeholder="邮箱" v-model="empInfo.email" />
			</view>
		</view>
		<view class="item_wrap">
			<view class="title">地址</view>
			<view class="input_wrap">
				<input placeholder="地址" v-model="empInfo.address"/>
			</view>
		</view>
		<wyb-button class="btn" :ripple="true" type="filled" color="#585cf7"
		:radius="radius" width="100%" height="88rpx" font-size="32rpx" @click="updateUsertInfor"
			>保存</wyb-button> 
		<uni-popup ref="popup" type="message">
			 <uniPopupMessage type="success" message="保存成功" :duration="2000"></uniPopupMessage>
		</uni-popup>
	</view>
</template>

<script>
	import { mapState, mapMutations } from "vuex";
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import { upload } from '@/common/util.js'
	export default {
		data() {
			return {
				radius: ["100px"],
				sexItem: [{id: 0,value:"女"},{id: 1,value:"男"}],
				chooseIndex: 0,
				empInfo: {},
				isEdit: true
			}
		},
		computed: {
			...mapState(["userInfo"]),
		},
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		onLoad() {
			//获取用户信息
			this.getUserInfor()
		},
		methods: {
			//选择头像
			chooseImg() {
				upload("/emp/icon", {}).then(res => {
					let iconUrl = res.data;
					let data = this.userInfo;
					data.icon = iconUrl;
					this.$store.commit("SET_USERINFO", data);
				})
			},
			//选择性别
			chooseSex(e) {
				let index = e.currentTarget.dataset.id || e.target.dataset.id;
				this.chooseIndex = index;
				this.empInfo.sex = parseInt(index);
				
			},
			//获取用户信息
			getUserInfor() {
				this.$api.getUserInfor().then( res=> {
					this.empInfo = res.data.data;
					this.chooseIndex = res.data.data.sex;
				})
			},
			//修改用户信息
			updateUsertInfor() {
				this.$api.updateUsertInfor(this.empInfo).then( res =>{
					this.$refs.popup.open();
					let data = this.userInfo;
					data.appName = this.empInfo.empName;
					this.$store.commit("SET_USERINFO", data);
				})
			}
			
		}
	}
</script>
<style>
	page{background: #FFFFFF;}
</style>
<style scoped lang="scss">
	.page_userSet{width: 750rpx;margin: 0 auto; padding:40rpx 20rpx 0}
	.user_img{width: 80rpx;height: 80rpx;overflow: hidden;border-radius: 50%;margin-right: 16rpx;}
	.item {width: 100%;padding: 30rpx 0;height: 108rpx;border-bottom: 1px solid #EEEEEE;display: flex;align-items: center;justify-content: space-between;font-size: 16px;box-sizing: border-box;line-height: 108rpx;
		.sub{display: flex;align-items: center;justify-content: space-between;}
	}
	.item_wrap{border-bottom: 1px solid #EEEEEE;padding: 20rpx 0 0;
		.title{font-size: 26rpx;color: #999999;}
		.input_wrap{width: 100%;}
		.input_wrap input{height: 80rpx;font-size: 32rpx;line-height: 80rpx;}
	}
	.sex_wrap{padding-bottom: 20rpx; display: flex;align-items: center;justify-content:space-between;height: 100rpx;
		.sex_item{display:inline-block; width: 148rpx;height: 56rpx;border: 2rpx solid #DDDDDD;font-size: 28rpx;color: #333333;text-align: center;line-height: 56rpx;margin-left: 20rpx;}
		.sex_item.active{background: #EEEEFE;border: 2rpx solid #585CF7;color: #585CF7;}
	}
	.btn{margin-top: 40rpx;margin-bottom: 60rpx;}
</style>
